<script setup lang="ts">
import { random } from 'lodash-es'


interface CountConfig {
  startValue: number,
  endValue: number,
  decimals: number,
  prefix: string,
  suffix: string,
  separator: string,
  duration: number
}

interface Props {
  background?: string,
  title?: string,
  icon?: string,
  percentage?: string,
  countConfig?: CountConfig
}

withDefaults(defineProps<Props>(), {
  background: 'white',
  title: 'Test',
  icon: '',
  percentage: '10%',
  countConfig: () => {
    return {
      startValue: 0,
      endValue: random(1000, 20000),
      decimals: 0,
      prefix: '',
      suffix: '',
      separator: ',',
      duration: 8000
    }
  }
})
</script>

<template>
  <el-card shadow="never" class="top-card" :class="'top-card-' + background">
    {{ title }}

    <template v-if="$slots.tag">
      <slot name="tag"></slot>
    </template>

    <p>
      <VipCount
        :decimals="countConfig.decimals"
        :duration="countConfig.duration"
        :end-value="countConfig.endValue"
        :prefix="countConfig.prefix"
        :separator="countConfig.separator"
        :start-value="countConfig.startValue"
        :suffix="countConfig.suffix"
      />
    </p>

    <div class="bottom">
      自上周以来
      <VipIcon icon="arrow-up-line" />
      <span>{{ percentage }}</span>
      <!--      <template v-if="$slots.chart">-->
      <!--        <slot name="chart"></slot>-->
      <!--      </template>-->
    </div>

    <template v-if="$slots.chart">
      <slot name="chart"></slot>
    </template>

    <div v-if="icon" class="right-icon">
      <VipIcon :icon="icon" />
    </div>

    <!--    <div class="bottom">-->
    <!--      自上周以来-->
    <!--      <vip-icon icon="arrow-up-line" />-->
    <!--      <span>{{ percentage }}</span>-->
    <!--      &lt;!&ndash;      <template v-if="$slots.chart">&ndash;&gt;-->
    <!--      &lt;!&ndash;        <slot name="chart"></slot>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </template>&ndash;&gt;-->
    <!--    </div>-->

    <!--    <template v-if="$slots.chart">-->
    <!--      <slot name="chart"></slot>-->
    <!--    </template>-->


  </el-card>
</template>

<style scoped lang="scss">

.top-card {
  position: relative;
  height: 168px !important;

  :deep() {
    .el-tag {
      float: right;
    }

    .el-card__body {
      display: block;
      padding: 20px !important;
    }
  }

  p {
    font-size: 28px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .right-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
    border-radius: 50%;
    transform: translateY(-50%);

    i {
      font-size: 35px;
    }
  }

  .bottom {
    position: absolute;
    bottom: 20px;

    .ri-arrow-up-line {
      width: 18px;
      height: 18px;
      margin: 0 3px 0 2px;
      //color: var(--el-color-success);
      background: var(--el-color-success-light);
      color: var(--el-color-primary);
      //background: var(--el-color-primary-light-1);
      border-radius: 50%;
      transform: scale(0.8);
    }

    span {
      //color: var(--el-color-success);
      color: var(--el-color-primary);
    }
  }

  &-blue {
    color: var(--el-color-white);
    background: var(--el-color-primary);
    background: linear-gradient(90deg, var(--el-color-primary-light-4), var(--el-color-primary));

    .right-icon {
      color: var(--el-color-primary);
      background: var(--el-color-white);
    }

    .bottom {
      .ri-arrow-up-line {
        color: var(--el-color-primary);
        background: var(--el-color-white);
      }

      span {
        color: var(--el-color-white);
      }
    }
  }
}

</style>
